<template>
  <div class="flex align-center flex-wrap group-checkbox-item">
    <mao-checkbox v-for="(item,index) in list" :key="index">
      <slot>
        <span style="font-size: 14px;">{{ item.name }}</span>
      </slot>
    </mao-checkbox>
  </div>
</template>
<script>
export default {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {}
  },
  methods: {
    toggle() {
      this.$emit('change', !this.checked)
    }
  }
}
</script>
<style lang="scss" scoped>
.icon {
  width: 14px;
  height: 14px;
  margin-right: 10px;
}
.mao-radio {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}
.dark{
  .mao-radio{
    color: rgba(255,255,255,0.7);
  }
}
</style>
